import React, { useState } from "react";
import { Breadcrumb, Flex, Layout, Menu, theme } from "antd";
import { SmileOutlined } from "@ant-design/icons";
import {
  NavigateFunction,
  Outlet,
  useLocation,
  useNavigate,
} from "react-router-dom";
import router from "../routes";
import { generateBreadcrumbs, generateMenuItems } from "./utils";
import FooterLayout from "./Footer";
import HeaderLayout from "./Header";
const { Content, Sider } = Layout;

const AppLayout: React.FC = () => {
  const navigate: NavigateFunction = useNavigate();
  const [collapsed, setCollapsed] = useState(false);

  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const location = useLocation();
  const breadcrumbs = generateBreadcrumbs(location.pathname);

  // 动态生成菜单项
  const menuItems = generateMenuItems(router.routes[0].children || []);
  console.log(menuItems, "menuItems");

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={(value) => setCollapsed(value)}
      >
        <Flex
          // 手机端使用不同的高度和字体大小
          className="h-10 sm:h-12 text-white gap-middle items-center justify-center text-sm sm:text-base"
          style={{ color: "#fff" }}
          gap="middle"
          align="center"
          justify="center"
        >
          <SmileOutlined color="green" className="text-blue-500 text-xl " />
          <span>logo demo</span>
        </Flex>

        <Menu
          theme="dark"
          defaultSelectedKeys={["/"]}
          mode="inline"
          items={menuItems}
          onClick={({ key }): void => {
            console.log(key, "key");
            navigate(key);
          }}
        />
      </Sider>
      <Layout>
        <HeaderLayout />
        <Content style={{ margin: "0 16px" }}>
          <Breadcrumb style={{ margin: "16px 0" }}>
            {breadcrumbs.map((breadcrumb, index) => (
              <Breadcrumb.Item key={index} href={breadcrumb.path}>
                {breadcrumb.breadcrumbName}
              </Breadcrumb.Item>
            ))}
          </Breadcrumb>
          <div
            style={{
              padding: 24,
              minHeight: 360,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet />
          </div>
        </Content>
        <FooterLayout />
      </Layout>
    </Layout>
  );
};

export default AppLayout;
